<template>
	<view>
		<!-- 标签 -->
		<uni-collapse v-if="tags">
			<uni-collapse-item :title="tags[current].cate_name" :open="status">
				<uni-tag
					style="margin: 10rpx;"
					v-for="(item, index) in tags"
					:key="index"
					:text="item.cate_name"
					type="warning"
					:inverted="current == index ? false : true"
					@click="doCheck(index)"
				></uni-tag>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 宫格列表 -->
		<view>
			<uni-grid
				:column="3"
				:square="false"
				:showBorder="false"
				:highlight="false"
			>
				<uni-grid-item v-for="(item, index) in cate" :key="index">
					<view style="margin: 10rpx;" @click="goRooms(index)">
						<!-- 图片 -->
						<image
							:src="item.pic_url"
							style="width: 100%;height: 300rpx;border-radius: 6rpx;"
						/>
						<!-- 文字 -->
						<view>{{ item.tag_name }}</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 标签数据
			tags: null,
			//切换到标签索引
			current: 0,
			// 标签下的分类数据
			cate: null,
			// 折叠栏默认状态
			status: false
		};
	},
	mounted() {
		this.getTags();
	},
	methods: {
		// 跳转到直播房间列表
		goRooms(index) {
			console.log('直播房间列表页');
			const { short_name, tag_name } = this.cate[index];
			console.log(short_name, tag_name);
			uni.navigateTo({
				url: `../rooms/rooms?short_name=${short_name}&tag_name=${tag_name}`
			});
		},
		// 获取tag对应的分类
		getCategory(index) {
			// console.log(this.tags[index]);
			const shortName = this.tags[index].short_name;
			console.log(shortName);
			// #ifndef H5
			const url =
				'http://capi.douyucdn.cn/api/v1/getColumnDetail?shortName=' +
				shortName;
			// #endif
			// #ifdef H5
			const url = '/capi/api/v1/getColumnDetail?shortName=' + shortName;
			console.log(url);
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.cate = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 切换tag 加载对应tag下的分类数据
		doCheck(index) {
			this.current = index;
			// 点击切换关闭折叠栏
			// 监听渲染完毕，再执行后续操作
			// 折叠栏状态 false->true->fasle
			this.status = true;
			this.$nextTick(() => {
				this.status = false;
				this.getCategory(index);
			});
		},
		// 获取直播的大分类
		getTags() {
			// #ifndef H5
			const url = 'http://capi.douyucdn.cn/api/v1/getColumnList';
			// #endif
			// #ifdef H5
			const url = '/capi/api/v1/getColumnList';
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.tags = res.data.data;
					this.getCategory(0);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style></style>
